<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<style>
			.form-wrap {
				padding: 10px;
			}
			select {
				width: 380px;
				height: 38px;
				line-height: 1.3;
				border-width: 1px;
				border-style: solid;
				border-color: #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}
			.layui-form-item .layui-form-label{
				width: 110px;
			    padding: 8px 15px;
			    height: 38px;
			    line-height: 20px;
			    border-width: 1px;
			    border-style: solid;
			    border-radius: 2px 0 0 2px;
				border-color: #e6e6e6;
			    text-align: center;
			    background-color: #FBFBFB;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    box-sizing: border-box;
			}
			.layui-form-item .layui-input-inline{
				width: 380px;
			}
		</style>
	</head>

	<body>
		<div class="form-wrap">
			<!-- 新建门店表单 -->
			<div class="layui-form-item">
			    <label for="store_code" class="layui-form-label" style="
			    transform:translateY(38px)">
                    <span class="we-red">*</span>所属区域
                </label>
				<div class="layui-input-block">
					<div class="layui-form-item">
						<select id="area" name="area" lay-filter="province">
							<option value="">请选择</option>
						</select>
					</div>
					<div class="layui-form-item">
						<select id="province" name="province" lay-filter="province">
							<option value="">请选择</option>
						</select>
					</div>
					<div class="layui-form-item">
						<select id="city" name="city" lay-filter="city">
							<option value="">请选择</option>
						</select>
					</div>
					<div class="layui-form-item">
						<select id="town" name="town" lay-filter="town">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
			</div>
			<form id="store_form" action="" method="post" class="layui-form layui-form-pane" enctype="multipart/form-data">
				<div class="layui-form-item">
					<label for="store_code" class="layui-form-label">
                        <span class="we-red">*</span>门店编号
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="store_code" name="storeCode" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="store_name" class="layui-form-label">
                        <span class="we-red">*</span>门店名称
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="store_name" name="storeName" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="short_name" class="layui-form-label">
                        <span class="we-red">*</span>门店简称
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="short_name" name="shortName" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="store_address" class="layui-form-label">
                        <span class="we-red">*</span>门店地址
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="store_address" name="storeAddress" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" id="img_insert_div">
		           <label class="layui-form-label">门店头像</label>
		           <div class="layui-input-block">
							<img id="store_icon_file" name="imgViewPath" width="100px" style="display:none" height="100px" src=""/>
							<input type="button" id="change_store_icon_button" value="选择(375 * 200)"/>
							<input type="file"  id="change_store_icon_input" name="file" style="display:none"/>
		           </div>
		        </div>
				<div class="layui-form-item">
					<label for="store_status" class="layui-form-label">
                        门店状态
                    </label>
					<div class="layui-input-inline">
						<select id="store_status_select" name="status" class="valid">
							<option value="1">正常</option>
							<option value="2">禁用</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
				</div>
			</form>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script src="../../publicjs/area.js"></script>
		<script src="../../publicjs/select.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['form', 'layer'], function() {
				var form = layui.form,
					layer = layui.layer;
				// 先判断当前的操作是新增还是修改
				var storeId = commonUtil.getRequestParam("storeId");
				if (storeId){
					// 请求后台得到当前修改的用户数据，将其显示在表单里
					var ajaxParam = {
						url : commonUtil.domain() +'/admin/wxwork/store/detail',
						data : {
							storeId : storeId
						}
					}
					// 省市区设置
					ajaxUtil.post(ajaxParam, function(data) {
						formUtil.setForm($('#store_form'), data.data);
						form.render("select");
						try {
							var regionCode = data.data.regionCode;
							var provinceCode = data.data.areaCode.split("-")[0];
							var cityCode = data.data.areaCode.split("-")[1];
							var townCode = data.data.areaCode.split("-")[2];
							
							var areaOptions = $('#area option');
							for(var i = 0; i < areaOptions.length; i++) {
								var code = $(areaOptions[i]).data('code');
								if(code == regionCode) {
									areaOptions[i].selected = true;
									removeEle(province);
									var dataList = getListByCode(regionCode, null, null);
									$.each(dataList, function(i,item){
										addEle(province, item.split("-")[1], item.split("-")[0]);
									})
								}
							}
							var provinceOptions = $('#province option');
							for(var i = 0; i < provinceOptions.length; i++){
								var code = $(provinceOptions[i]).data('code');
								if(code == provinceCode){
									provinceOptions[i].selected = true;
									removeEle(city);
									var dataList = getListByCode(regionCode, provinceCode, null);
									$.each(dataList, function(i,item){
										addEle(city, item.cityName, item.cityCode);
									})
								}
							}
							var cityOptions = $('#city option');
							for(var i = 0; i < cityOptions.length; i++){
								var code = $(cityOptions[i]).data('code');
								if(code == cityCode){
									cityOptions[i].selected = true;
									removeEle(town);
									var dataList = getListByCode(regionCode, provinceCode, cityCode);
									$.each(dataList, function(i,item){
										addEle(town, item.areaName, item.areaCode);
									})
								}
							}
							var townOptions = $('#town option');
							for(var i = 0; i < townOptions.length; i++){
								var code = $(townOptions[i]).data('code');
								if(code == townCode){
									townOptions[i].selected = true;
								}
							}
						} catch (e) {
							console.info(e);
						}
					});
				}
				// 监听表单提交
				form.on('submit(add)', function(data) {
					var data = data.field;
					console.info(data);
					// 提交时候 先将所选的省市区的编号得到
					var regionName = $("#province").val();
					var regionCode = $("#area").find("option:selected").attr("data-code");
					var provinceName = $("#province").val();
					var provinceCode = $("#province").find("option:selected").attr("data-code");
					var cityName = $("#city").val();
					var cityCode = $("#city").find("option:selected").attr("data-code");
					var townName = $("#town").val();
					var townCode = $("#town").find("option:selected").attr("data-code");
					if(!regionName || !regionName || !provinceName || !provinceCode || !cityName || !cityCode || !townName || !townCode){
						layer.alert("请输入完整的门店区域信息。");
						return false;					
					}
					data.regionCode = regionCode;
					data.areaCode = provinceCode + "-" + cityCode + "-" + townCode;
					data.areaName = provinceName + "-" + cityName + "-" + townName;
					var url,msg;
					// 有storeId就是修改，没有storeId就是新增
					if(storeId){
						url = commonUtil.domain() +"/admin/wxwork/store/update";
						msg = "修改门店";
						data.storeId = storeId;
					}else{
						var file = document.getElementById('change_store_icon_input').files[0]
						if(typeof(file) == "undefined"){
							url = commonUtil.domain() +"/admin/wxwork/store/insert/nofile";
						}else{
							url = commonUtil.domain() +"/admin/wxwork/store/insert";
						}
						msg = "新增门店";
					}
					var ajaxParam = {
						url : url
					}
					var formData = new FormData();
					for(var key in data){
						formData.append(key, data[key]);
					}
					formData.append("file", document.getElementById('change_store_icon_input').files[0]);
					// 发送ajax 提交表单数据
					ajaxUtil.submitForm(formData, ajaxParam, function(data) {
						if(data.code == 200){
							layer.alert(msg + "成功", {
								icon: 6
							}, function() {
								// 刷新父级的用户表格
								var parentHtml = window.parent;
								parentHtml.storeTable.refresh();
								//关闭当前frame
								var index = parentHtml.layer.getFrameIndex(window.name);
								parentHtml.layer.close(index);
							});
						}else{
							layer.alert(data.msg);
						}
					});
					return false;
				});
			});
			
			
			$(function(){
				// 点击更换图片按钮
				commonUtil.setMaxLength(40);
				$('#change_store_icon_button').click(function() {
					$('#change_store_icon_input').click();
					document.getElementById("change_store_icon_input").onchange = function(){
						var imgFile = document.getElementById('change_store_icon_input').files[0];
						var fileName = imgFile.name.toLowerCase();
						if(!fileName.endWith("jpg") && !fileName.endWith("png")
								&& !fileName.endWith("gif") && !fileName.endWith("jpeg")){
							layer.msg('只支持jpg，png，gif类型图片');
							return;
						}
						var read = new FileReader();
						read.readAsDataURL(imgFile);
						read.onload = function (e) {
							$('#store_icon_file').show();
							$('#store_icon_file').attr("src", this.result);
						}
					};
				});
			});
		</script>
	</body>

</html>